<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入vue框架 -->
<script type="text/javascript" src="js/vue-2.6.10.js"></script>
</head>
<body>
	<!-- {{}} 差值表达式， 识别其中的名称从数据中获取 -->
	<div id="app">
		我是{{name}}，今年{{age}}岁，是个{{gender}}的, 电话号码为：{{phone}}；
		<span v-if="age<25" style="color:red;">我是一个三好美少年</span>
		<span v-else style="color:red;">我曾经是一个三好美少年</span>
		<br>财富值： <span v-if="money<100">￥{{money}}</span>
					  <span v-else>99+</span>
		<br>
		<input type="text" v-model="phone">
		<!-- v-model双向绑定，数据与显示的内容相互影响 -->
		<br><button v-on:click='age++;'>增加</button>
		<br><button @click='age--;'>减少</button>
		<hr>
		<br><button v-on:click='add()'>增加</button>
		<br><button @click='reduce()'>减少</button>
		<br><button @click='add()'>简化版</button>
		
		<table border="1">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="student in student_list">
					<td></td>
					<td>{{student.name}}</td>
					<td>{{student.age}}</td>
					<td>{{student.gender}}</td>
				</tr>
			</tbody>
		</table>
		<hr>
		<table border="1">
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>性别</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(student, index) in student_list">
					<td>{{index+1}}</td>
					<td>{{student.name}}</td>
					<td>{{student.age}}</td>
					<td>{{student.gender}}</td>
				</tr>
			</tbody>
		</table>
		
		
	</div>
	<script type="text/javascript">
		//let vue: 表示声明一个vue变量
		//new Vue(): 表示创建一个vue对象
		//el : element, 表示当前这个vue对象绑定哪一个元素
		//data: 对象中的数据
		let vue = new Vue({
			el: '#app',
			data: {
				name: '张三',
				age: 200,
				gender: '男',
				phone: '123456798',
				money: 10,
				student_list: [
				{
					name: '张三',
					age: 18,
					gender: '男'
				},
				{
					name: '李四',
					age: 20,
					gender: '女'
				},
				{
					name: '小明',
					age: 25,
					gender: '女'
				}],
			},
			methods: {
				add: function(){
					alert("点击了添加");
					vue.age ++;
				},
				reduce: function(){
					alert("点击了减少");
					vue.age --;
				},
				easy: ()=>{
					alert("点击了省略版函数");
					vue.age ++;
				}

			}
		});
	</script> 
</body>
</html>